<template>
  <div class="log-view">
    <div class="page-header">
      <h1>日志查看</h1>
    </div>

    <!-- 日志类型切换 -->
    <el-card class="tab-card">
      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
        <el-tab-pane label="操作日志" name="operation">
          <!-- 操作日志搜索 -->
          <el-form :inline="true" :model="operationSearchForm" class="search-form">
            <el-form-item label="关键词">
              <el-input
                v-model="operationSearchForm.keyword"
                placeholder="请输入用户名、操作类型或描述"
                style="width: 280px"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleOperationSearch">
                <el-icon><Search /></el-icon>
                搜索
              </el-button>
              <el-button @click="handleOperationReset">
                <el-icon><Refresh /></el-icon>
                重置
              </el-button>
            </el-form-item>
          </el-form>

          <!-- 操作日志表格 -->
          <el-table
            v-loading="operationLoading"
            :data="operationTableData"
            stripe
            style="width: 100%"
          >
            <el-table-column prop="username" label="用户名" width="120" />
            <el-table-column prop="operation" label="操作类型" width="100" />
            <el-table-column prop="module" label="模块" width="120" />
            <el-table-column prop="description" label="操作描述" width="200" />
            <el-table-column prop="ip" label="IP地址" width="130" />
            <el-table-column prop="executionTime" label="执行时间(ms)" width="120" />
            <el-table-column prop="createTime" label="操作时间" width="160" />
          </el-table>

          <!-- 操作日志分页 -->
          <div class="pagination">
            <el-pagination
              v-model:current-page="operationPagination.current"
              v-model:page-size="operationPagination.size"
              :page-sizes="[10, 20, 50, 100]"
              :total="operationPagination.total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleOperationSizeChange"
              @current-change="handleOperationCurrentChange"
            />
          </div>
        </el-tab-pane>

        <el-tab-pane label="登录日志" name="login">
          <!-- 登录日志搜索 -->
          <el-form :inline="true" :model="loginSearchForm" class="search-form">
            <el-form-item label="关键词">
              <el-input
                v-model="loginSearchForm.keyword"
                placeholder="请输入用户名、IP地址或登录结果"
                style="width: 280px"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleLoginSearch">
                <el-icon><Search /></el-icon>
                搜索
              </el-button>
              <el-button @click="handleLoginReset">
                <el-icon><Refresh /></el-icon>
                重置
              </el-button>
            </el-form-item>
          </el-form>

          <!-- 登录日志表格 -->
          <el-table
            v-loading="loginLoading"
            :data="loginTableData"
            stripe
            style="width: 100%"
          >
            <el-table-column prop="username" label="用户名" width="120" />
            <el-table-column prop="loginType" label="登录类型" width="100" />
            <el-table-column prop="loginResult" label="登录结果" width="100">
              <template #default="scope">
                <el-tag :type="scope.row.loginResult === 'SUCCESS' ? 'success' : 'danger'">
                  {{ scope.row.loginResult === 'SUCCESS' ? '成功' : '失败' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="ip" label="IP地址" width="130" />
            <el-table-column prop="userAgent" label="用户代理" width="200" show-overflow-tooltip />
            <el-table-column prop="createTime" label="登录时间" width="160" />
          </el-table>

          <!-- 登录日志分页 -->
          <div class="pagination">
            <el-pagination
              v-model:current-page="loginPagination.current"
              v-model:page-size="loginPagination.size"
              :page-sizes="[10, 20, 50, 100]"
              :total="loginPagination.total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleLoginSizeChange"
              @current-change="handleLoginCurrentChange"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import {getLoginLogs, getOperationLogs} from '@/api/log'
import {Refresh, Search} from '@element-plus/icons-vue'

const activeTab = ref('operation')
const operationLoading = ref(false)
const loginLoading = ref(false)

// 操作日志相关
const operationSearchForm = reactive({
  keyword: ''
})

const operationPagination = reactive({
  current: 1,
  size: 10,
  total: 0
})

const operationTableData = ref([])

// 登录日志相关
const loginSearchForm = reactive({
  keyword: ''
})

const loginPagination = reactive({
  current: 1,
  size: 10,
  total: 0
})

const loginTableData = ref([])

// 获取操作日志
const fetchOperationLogs = async () => {
  try {
    operationLoading.value = true
    const params = {
      page: operationPagination.current,
      size: operationPagination.size,
      keyword: operationSearchForm.keyword
    }
    
    const response = await getOperationLogs(params)
    operationTableData.value = response.content
    operationPagination.total = response.totalElements
  } catch (error) {
    console.error('获取操作日志失败:', error)
  } finally {
    operationLoading.value = false
  }
}

// 获取登录日志
const fetchLoginLogs = async () => {
  try {
    loginLoading.value = true
    const params = {
      page: loginPagination.current,
      size: loginPagination.size,
      keyword: loginSearchForm.keyword
    }
    
    const response = await getLoginLogs(params)
    loginTableData.value = response.content
    loginPagination.total = response.totalElements
  } catch (error) {
    console.error('获取登录日志失败:', error)
  } finally {
    loginLoading.value = false
  }
}

// 标签页切换
const handleTabChange = (tabName) => {
  if (tabName === 'operation') {
    fetchOperationLogs()
  } else if (tabName === 'login') {
    fetchLoginLogs()
  }
}

// 操作日志搜索
const handleOperationSearch = () => {
  operationPagination.current = 1
  fetchOperationLogs()
}

// 操作日志重置
const handleOperationReset = () => {
  operationSearchForm.keyword = ''
  operationPagination.current = 1
  fetchOperationLogs()
}

// 登录日志搜索
const handleLoginSearch = () => {
  loginPagination.current = 1
  fetchLoginLogs()
}

// 登录日志重置
const handleLoginReset = () => {
  loginSearchForm.keyword = ''
  loginPagination.current = 1
  fetchLoginLogs()
}

// 操作日志分页
const handleOperationSizeChange = (val) => {
  operationPagination.size = val
  operationPagination.current = 1
  fetchOperationLogs()
}

const handleOperationCurrentChange = (val) => {
  operationPagination.current = val
  fetchOperationLogs()
}

// 登录日志分页
const handleLoginSizeChange = (val) => {
  loginPagination.size = val
  loginPagination.current = 1
  fetchLoginLogs()
}

const handleLoginCurrentChange = (val) => {
  loginPagination.current = val
  fetchLoginLogs()
}

onMounted(() => {
  fetchOperationLogs()
})
</script>

<style scoped>
.log-view {
  padding: 0;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0;
  color: #303133;
}

.tab-card {
  margin-bottom: 20px;
}

.search-form {
  margin-bottom: 20px;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>